<template>
  <view class="accounts-container">
    <!-- 页面标题 -->
    <view class="page-title">用户列表</view>

    <!-- 加载中提示 -->
    <view class="loading" v-if="loading">加载中...</view>

    <!-- 空数据提示 -->
    <view class="empty" v-else-if="!loading && accountsList.length === 0">
      暂无 Accounts 数据
    </view>

    <!-- 数据列表（点击触发菜单） -->
    <view class="accounts-list" v-else>
      <view 
        class="accounts-item" 
        v-for="(item, index) in accountsList" 
        :key="item._id"  
        @click="handleItemClick(item, index)"
      >
        <!-- 序号 -->
        <view class="item-index">第 {{ index + 1 }} 条</view>
        <!-- 展示数据 -->
        <view class="item-field">ID：{{ item._id || '-' }}</view>
        <view class="item-field">用户名：{{ item.username || item.name || '-' }}</view>
        <view class="item-field">手机号：{{ item.telephone || '-' }}</view>
        <view class="item-field">邮箱：{{ item.email || '-' }}</view>
        <!-- 操作提示 -->
        <view class="item-operate">点击查看操作</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      accountsList: []
    };
  },
  onLoad() {
    this.getAccountsData();
  },
  methods: {
    // 调用云函数获取Accounts数据
    async getAccountsData() {
      this.loading = true;
      try {
        const res = await uniCloud.callFunction({
          name: 'getUser',
          data: {}
        });
        if (res.result.code === 0) {
          this.accountsList = res.result.data;
        } else {
          uni.showToast({
            title: res.result.msg,
            icon: 'none',
            duration: 2000
          });
        }
      } catch (err) {
        console.error("获取数据失败：", err);
        uni.showToast({
          title: '网络错误，获取数据失败',
          icon: 'none',
          duration: 2000
        });
      } finally {
        this.loading = false;
      }
    },

    // 点击列表项弹出操作菜单（编辑+删除）
    async handleItemClick(item, index) {
      try {
        const res = await uni.showActionSheet({
          itemList: ['编辑', '删除'],
          itemColor: '#333'
        });

        switch (res.tapIndex) {
          case 0: // 编辑
            uni.showToast({ 
              title: `编辑用户：${item.username || item.name || '未知用户'}`, 
              icon: 'none',
              duration: 2000
            });
            break;
          case 1: // 删除：调用removeUser云函数执行删除
            await this.deleteAccount(item._id, index);
            break;
        }
      } catch (err) {
        console.log("菜单操作取消：", err);
      }
    },

    // 执行删除操作（调用removeUser云函数）
    async deleteAccount(userId, index) {
      try {
        // 调用removeUser云函数
        const delRes = await uniCloud.callFunction({
          name: 'removeUser', // 对应删除云函数名称
          data: { _id: userId } // 传递要删除的用户ID
        });

        // 处理删除结果
        if (delRes.result.code === 0) {
          // 删除成功：从页面列表中移除该条数据
          this.accountsList.splice(index, 1);
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 2000
          });
        } else {
          // 删除失败：提示错误信息
          uni.showToast({
            title: delRes.result.msg || '删除失败',
            icon: 'none',
            duration: 2000
          });
        }
      } catch (err) {
        console.error("删除接口调用失败：", err);
        uni.showToast({
          title: '网络错误，删除失败',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
};
</script>

<style scoped>
.accounts-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
  color: #333;
}
.loading, .empty {
  text-align: center;
  padding: 50rpx 0;
  font-size: 28rpx;
  color: #999;
}
.accounts-list {
  gap: 20rpx;
  display: flex;
  flex-direction: column;
}
.accounts-item {
  background-color: #fff;
  padding: 25rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  cursor: pointer; /* H5端鼠标悬浮手型 */
}
.item-index {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #409eff;
}
.item-field {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666;
  margin-bottom: 8rpx;
}
.item-operate {
  font-size: 24rpx;
  color: #409eff;
  margin-top: 10rpx;
  text-align: right;
}
</style>